<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="col-md-12">
      <div class="col-sm-6">
        <div class="form-group clearfix">
          <label class="col-md-12 control-label">--全部角色--</label>
          <div class="col-md-12" style="height: 400px;overflow-y: scroll;">
            <table class="table table-bordered table-striped  table-hover">
              <thead>
              <tr>
                <th style="width:20px;">#</th>
                <th>角色</th>
                <th style="width: 60px;"></th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="roleNodes && roleNodes.length>0" v-for="(item,index) in roleNodes">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>
                  <a v-if="checkRole(item)==false" href="javascript:;" @click="addRole(item)" rel="nofollow" class=""><i class="fa fa-check"></i> 添加</a>
                  <label v-if="checkRole(item)==true">已存在</label>
                </td>
              </tr>
              <tr v-if="roleNodes==null || roleNodes==0">
                <td colspan="3">
                  <div class="alert"><strong>{{roleMessage||'暂无角色数据'}}</strong></div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-group clearfix">
          <label class="col-md-12 control-label">--当前角色--</label>
          <div class="col-md-12" style="height: 400px;overflow-y: scroll;">
            <div class="table-responsive table-scrollable">
              <table class="table table-bordered table-striped  table-hover">
                <thead>
                <tr>
                  <th style="width:20px;">#</th>
                  <th>角色</th>
                  <th style="width: 60px;"></th>
                </tr>
                </thead>
                <tbody>
                <tr v-if="staffRoleNodes && staffRoleNodes.length>0" v-for="(item,index) in staffRoleNodes">
                  <td>{{ index+1}}</td>
                  <td>{{item.name}}</td>
                  <td>
                    <a href="javascript:;" @click="delRole(item)" rel="nofollow" class=""><i class="fa fa-close"></i> 删除</a>
                  </td>
                </tr>
                <tr v-if="staffRoleNodes==null || staffRoleNodes==0">
                  <td colspan="3">
                    <div class="alert"><strong>{{staffRoleMessage||'暂无角色授权'}}</strong></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="clearfix "></div>
      <div class="col-md-12" style="height: 50px;">
        <div>
          <a href="javascript:;" class="btn btn-primary" @click="lbox.closeMyBoxLayer();">返回</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'
  import 'jquery.cookie'
  import '@/assets/js/validate/validation-vendor.js'
  import {apiUtil, site} from '@/assets/js/boss'
  import axios from 'axios';

  export default {
    data() {
      return {
        id: 0,
        staffRoleNodes: [],
        roleNodes: [],
        staffRoleMessage: '',
        roleMessage: ''
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      that.id = sessionStorage.getItem(site.staff.info);
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      that.staff.init(function () {
        if (apiUtil.existSessionKey(site.staff.info)) {
          that.loadAllRole();
          that.loadStaffRole();
        }
      });
    },
    methods: {
      checkRole(item) {
        let that = this;
        var flag = false;
        if (that.staffRoleNodes) {
          for (var i = 0; i < that.staffRoleNodes.length; i++) {
            if (that.staffRoleNodes[i].id === item.id) {
              // console.info("--已存在---");
              flag = true;
            }
          }
        }
        return flag;
      },
      addRole(item) {
        let that = this;
        if (!that.checkRole(item)) {
          axios.post(site.staff.addRole, {'userId': that.id, 'roleId': item.id}).then(function (response) {
            const result = response.data;
            // console.info("获取数据.." + JSON.stringify(result));
            if (result.code === 0) {
              that.staffRoleNodes.push(item);
            } else {
              alert(result.message);
            }
          });
        }
      },
      delRole(item) {
        let that = this;
        axios.post(site.staff.delRole, {'userId': that.id, 'roleId': item.id}).then(function (response) {
          const result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            apiUtil.removeArrItem(that.staffRoleNodes, item);
          } else {
            alert(result.message);
          }
        });
      },
      loadAllRole() {
        let that = this;
        axios.post(site.authRole.list, {'type': 0}).then(function (response) {
          const result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            that.roleNodes = result.data;
          } else {
            that.roleMessage = result.message;
            alert(result.message);
          }
        });
      },
      loadStaffRole() {
        let that = this;
        axios.post(site.staff.getRoleByUser + that.id, {}).then(function (response) {
          const result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            that.staffRoleNodes = result.data;
          } else {
            that.staffRoleMessage = result.message;
            alert(result.message);
          }
        });
      }
    }
  }
</script>
